<template>
  <div class="leftMain_top">
    <div class="leftMain_topIn" v-for="(value, key) in sliceJson" :key="key">
      <ul>
        <li>
          <div class="liIn">
            <h3>{{ key }}</h3>
            <p class="shu">
              <span class="shu1">{{ value }}</span>
            </p>
            <div class="zi w-5">
              <span class="span1"></span>
              <span></span>
            </div>

            <!-- 边框风格-->
            <Border />
          </div>
        </li>
      </ul>
    </div>
    <!--    <Border/>-->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getAttackType } from '~/api/base'
import Border from "./view/Border.vue";

const countData = ref([])
let sliceJson = ref([])

getAttackType().then(res => {
  console.log('leftop', res)
  // countData获取逻辑
  countData.value = res
  // Json对象转换为数组
  const jsonArray = Object.entries(countData.value)
  // 截取第八个到第十一个元素
  const sliceArray = jsonArray.slice(7, 11)
  console.log('sliceJson', sliceArray)
  sliceJson.value = Object.fromEntries(
    sliceArray.map(item => [item[0], item[1]])
  );

  console.log('sliceJson', sliceJson.value)
})
</script>

<style scoped>
.leftMain_top {
  display: flex;
  justify-content: space-between;
}

.leftMain_top ul {
  /* display: flex; */
  display: -webkit-flex;
  flex: 1;
  padding-left: 8px;
}

.leftMain_top ul li {
  width: 100%;
  margin-top: 2px;
}


</style>
